import React, { useEffect, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
// import { sub, add } from '../store/modules/counterStore';
import { sub, add, addNum } from '@/store/modules/counterStore';
import { fetchChannel } from '../store/modules/channelStore';


const Redux = () => {
  const { count, initData } = useSelector(stste => stste.counter)
  const { channelList } = useSelector(stste => stste.channel)
  // 得到dispatch函数
  const dispatch = useDispatch();
  const minus = () => {
    dispatch(sub())
  }
  // useEffect触发异步
  useEffect(() => {
    dispatch(fetchChannel())
  }, [dispatch])
  return (
    <div>
      {/* 调用dispatch提交action对象 */}
      <button onClick={minus}>-</button>
      {count}-{initData}
      <button onClick={() => { dispatch(add()) }}>+</button>
      <button onClick={() => { dispatch(addNum(10)) }}>+10</button>
      <ul>
        {channelList.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
};

export default Redux;